<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js Demo</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
  </style>
</head>
<body>
  
  <script src="../lib/three.js"></script>
  <script src="../lib/OrbitControls.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
  <script>
    const renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 500);
    camera.position.set(0, 0, 20);
    const scene = new THREE.Scene();

    const args = {
      lightX: 3,
      lightY: 5,
      lightZ: 7,
    }

    // 平行光
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(args.lightX, args.lightY, args.lightZ);
    scene.add(light);
    const lightHelper = new THREE.DirectionalLightHelper(light);
    scene.add(lightHelper);

    // 环境光
    const ambientLight = new THREE.AmbientLight(0xffffff, .4);
    scene.add(ambientLight);

    const geometry = new THREE.BoxGeometry(2, 2, 2);
    const material = new THREE.MeshLambertMaterial({
      color: 0xd88c00
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    
    const controls = new THREE.OrbitControls( camera, renderer.domElement );

    const gui = new dat.GUI();
    gui.add(args, 'lightX', -20, 20);
    gui.add(args, 'lightY', -20, 20);
    gui.add(args, 'lightZ', -20, 20);
    
    function render() {
      requestAnimationFrame(render);
      controls.update();
      light.position.set(args.lightX, args.lightY, args.lightZ);
      renderer.render(scene, camera);
    }

    render();
    
  </script>
</body>
</html>